<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<script>
    window.onload = function () {
        //getElementById通过id获取一个元素节点对象
        var b = document.getElementById("but1");
        b.onclick = function () {
            var a = document.getElementById("beijin");
            alert(a.innerHTML)
            //alert("222")c
        };
        //getElementsByTagName通过标签名获取一组元素节点的对象
        var c = document.getElementById("but2");
        c.onclick = function () {
            var li = document.getElementsByTagName("li");
            for (var i = 0; i < li.length; i++) {
                alert(li[i].innerHTML)
            }
        }
        //getElementsByName通过name属性名获取一组元素的节点对象
        var e = document.getElementById("btn3");
        e.onclick = function () {
            var f = document.getElementsByName("gender");
            for (var i = 0; i < f.length; i++) {
                alert(f[i].type)
            }
        }
        var g = document.getElementById("zi");
        g.onclick = function () {
            var city = document.getElementById("city");
            //childNodes会获取文本节点在内的所有节点，根据dom标准文本空白的地方也算一个节点
            var li = city.childNodes;
            //children会获取所有元素节点
            var li2 = city.children;
            //获取第一个节点
            var yi = city.firstChild;
            //获取最后一个节点
            var er = city.lastChild;
            alert(yi)
            alert(er)
            for (var i = 0; i < li2.length; i++) {
                alert(li2[i]);
            }
            //alert(li[i]);
        }
        //定义一个全局函数
        function myclick(but, fun) {
            var b = document.getElementById(but);
            b.onclick = fun;
        }
        myclick("btn3", function () {
            var biejing = document.getElementById("beijin");
            //parentNote返回当前对象的父节点
            var s = biejing.parentNode;
            alert(s);
            //innerText可返回文本内容，和innerHtml不同之处在于他可以将标签去除
            alert(s.innerText);
        });

        myclick("btn4", function () {
            var shanghai = document.getElementById("shanghai");
            //previousSibling返回当前元素上一个兄弟节点（也可以获得空格）
            var s = shanghai.previousSibling;
            //previousElementSibling返回当前元素上一个兄弟元素(自动去除空格)
            var a = shanghai.previousElementSibling;
            alert(s);
            alert(s.innerText);
            alert(a);
            alert(a.innerText);
        });

        myclick("tijiao", function () {
            var uname = document.getElementById("uname");
            uname.value = "1111"
            //alert(uname.value);

        });
        //向ul中添加东京的li
        myclick("btn5", function () {
            //创建一个子元素节点
            var li = document.createElement("li");
            //创建文本节点对象
            var dj = document.createTextNode("东京");
            //将dj设置到子元素节点
            var text = li.appendChild(dj);
            //向父节点中添加子元素
            var ul = document.getElementById("city");
            ul.appendChild(li);
        });
        //将东京节点插入到北京的前面
        myclick("btn6", function () {
            //创建一个子元素节点
            var li = document.createElement("li");
            //创建文本节点对象
            var dj = document.createTextNode("东京");
            //将dj设置到子元素节点
            li.appendChild(dj);
            //获取插入节点的对象
            var beijing = document.getElementById("beijin");   
            //在父节点中替换子元素
            var ul = document.getElementById("city");
            ul.insertBefore(li,beijing)
        });
        //替换子节点
        myclick("btn7", function () {
            //创建一个子元素节点
            var li = document.createElement("li");
            //创建文本节点对象
            var dj = document.createTextNode("东京");
            //将dj设置到子元素节点
            li.appendChild(dj);
            //获取插入节点的对象
            var beijing = document.getElementById("beijin");   
            //在父节点中替换子元素
            var ul = document.getElementById("city");
            ul.replaceChild(li,beijing);
        });
        //删除子节点
        myclick("btn8", function () {
            var beijin = document.getElementById("beijin");   
            // var ul = document.getElementById("city");
            // ul.removeChild(beijin);
            beijin.parentNode.removeChild(beijin);
        });
        //通过innerHTML添加
        myclick("btn9", function () {
            //会全部替换掉
            // var ic = document.getElementById("city");
            // ic.innerHTML += "<li>东京</li>";
            var li = document.createElement("li");
            li.innerHTML = "东京";
            var ul = document.getElementById("city");
            ul.appendChild(li);
        });
    }
</script>

<body>

    <div id="total">

        <div id="Uli"></div>
        <ul id="city">
            <li id="beijin">北京</li>
            <li id="shanghai">上海</li>
            <li id="xian">西安</li>
            <li id="guangzhou">广州</li>
        </ul>
    </div>
    <button id="but1">点我查看北京</button>
    <button id="but2">点我查看全部</button>
    <button id="zi">点我查看子节点</button>
    <button id="btn3">点我查看id为北京的父节点</button>
    <button id="btn4">点我查看id为上海地前一个节点</button>
    <button id="btn5">点我添加东京节点</button>
    <button id="btn6">点我插入东京节点</button>
    <button id="btn7">点我替换北京节点</button>
    <button id="btn8">点我删除北京节点</button>
    <button id="btn9">点我添加东京节点</button>
    <div>
        <form action="">
            gender:<input type="radio" name="gender" value="male">
            email: <input type="radio" name="gender" value="female">
           

            <button id="btn3">点我</button>
        </form>
        <form action="" method="get">
            username：<input type="text" name="username" value="今天天气怎么样" id="uname">
            <input type="submit" value="提交" id="tijiao">
        </form>
    </div>
    </div>

</body>

</html>